<template>
  <span>
    <el-button @click="handleClick" type="text" size="small">详情</el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'设备详情'" width="500px">
      <div class v-loading="mqttloading">
        <div class="bb">
          <el-row style="line-height:40px;">
            <el-col :span="4">
              <em :class="line_status[info.status]"></em>
            </el-col>
            <el-col :span="12" class="pcub-te fz16 bold" v-text="info.name">设备名字</el-col>
            <el-col :span="8" class="tx-c">
              <!-- <el-switch v-model="switch_on" @change="sendMQ" active-text="合闸" inactive-text="开闸"></el-switch> -->
               <toggle-switch :value="switch_on" :id="info.id" @change="toggleChange" :disabled="info.status==0"></toggle-switch>
            </el-col>
          </el-row>
        </div>
        <div class="mt20">
          <datas :id="info.id" class="bb"></datas>
          <div class="fz14">
            <el-row style="line-height:40px;">
              <el-col :span="12">
                <p>
                  <span>预设报警电流:</span>
                  <em v-text="info.a?info.a/10:0"></em>
                  <em>A</em>
                </p>
              </el-col>
              <el-col :span="12">
                <p>
                  <span>预设报警剩余电流:</span>
                  <em v-text="info.listA||0"></em>
                  <em>mA</em>
                </p>
              </el-col>
              <el-col :span="12">
                <p>
                  <span>预设报警温度:</span>
                  <em v-text="info.t||0"></em>
                  <em>℃</em>
                </p>
              </el-col>
              <el-col :span="12">
                <p>
                  <span>预设报警电压:</span>
                  <em v-text="info.u?info.u/10:0"></em>
                  <em>V</em>
                </p>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" size="medium" type="text" @click="goShow">更多信息</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import datas from "./datas";
import ToggleSwitch from "@/components/switch";
import { _equipmentShow, _mqttPub } from "@/http/ajax";
export default {
  components: { datas ,ToggleSwitch},
  name: "addnet",
  props: {
    gat_id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      mqttloading: false,
      line_status: {
        2: "NOTIFICATION",
        1: "ONLINE",
        0: "OFFLINE"
      },
      switch_on: false,
      info: {},
      current: {}
    };
  },
  created() {},
  methods: {
    domInit() {},
    getDetail() {
      _equipmentShow(
        this.gat_id,
        res => {
          this.info = res.info;
          this.current = res.current;
          this.switch_on = res.info.switchOn == 1 ? true : false;
        },
        err => {}
      );
    },
    handleClick() {
      this.dialog = true;
      this.getDetail();
      // this.$nextTick(()=>{
      //   const _this = this.$refs.mor;
      //   _this.domInit();
      // })
    },
    toggleChange(val){
      let boo = val.value?1:0
      this.sendMQ(boo)
    },
    sendMQ(boo) {
      this.mqttloading = true;
      let data = {
        msg: boo,
        topic: `/eecc/recv/${this.info.imei}/raw`,
        clientid: this.info.imei,
        adr: this.info.adr || ""
      };
      _mqttPub(
        data,
        res => {
          this.$notify({
            title: "操作成功",
            duration: 2000
          });
          this.getDetail();
          this.dialog = false;
          this.mqttloading = false;
        },
        err => {}
      );
    },
    goShow() {
      let routeUrl = this.$router.resolve({
        path: `/eqmtShow/${this.gat_id}`
        //   query: {id:row.id}
      });
      window.open(routeUrl.href, "_blank");
    }
  }
};
</script>

<style lang="scss">
.ONLINE {
  color: #67b91a;
}
.OFFLINE {
  color: #c8c9cc;
}
.NOTIFICATION {
  color: #ef3535;
}
.NOTIFICATION:before,
.OFFLINE:before,
.ONLINE:before {
  content: "●";
  margin-right: 5px;
}
.OFFLINE:after {
  content: "离线";
  font-size: 14px;
}
.ONLINE:after {
  content: "正常";
  font-size: 14px;
}
.NOTIFICATION:after {
  content: "报警";
  font-size: 14px;
}
</style>
